<!-- 注册确认用户协议和隐私 -->
<script lang="ts" setup>
import { Form } from '@varlet/ui';
import dayjs from 'dayjs';
import { computed, nextTick, ref } from 'vue';

// 定义props
const props = defineProps<{
    modelValue: string | string[];
    rules?: Array<(v: string) => any>
    extraMessage?: string;
    label?: string;
}>();

// 定义外部事件
const emit = defineEmits(['update:modelValue']);

const showPicker = ref(false);
// 最大日期就是当天
const maxDate = dayjs().format('YYYY-MM-DD');

const pivkerModelValue = computed(() => {
    return props.modelValue || maxDate;
});

// 绑定form
const { useForm, useValidation } = Form;
const {
    errorMessage,
    validateWithTrigger: _validateWithTrigger,
    validate: _validate,
    resetValidation,
} = useValidation();
const { bindForm, form } = useForm();

const validate = () => _validate(props.rules, props.modelValue);

function reset() {
    emit('update:modelValue', false);
    resetValidation();
}

function validateWithTrigger(trigger: string) {
    nextTick(() => {
        const { rules, modelValue } = props;
        _validateWithTrigger(['onChange'], trigger, rules, modelValue);
    });
}

const onChange = (value: string | string[]) => {
    if (form?.readonly.value || form?.disabled.value) {
        return;
    }
    emit('update:modelValue', value);
    validateWithTrigger('onChange');
    showPicker.value = false;
};

const apis = {
    reset,
    validate,
    resetValidation,
};

defineExpose(apis);
bindForm?.(apis);
</script>

<template>
    <div class="form-select-date">
        <div class="label" v-if="label">{{ label }}</div>
        <div :class="['select-box', errorMessage ? 'select-error' : '']" @click="showPicker = true">
            {{ modelValue }}
        </div>
        <VarFormDetails :error-message="errorMessage" :extra-message="extraMessage" />
        <var-popup v-model:show="showPicker" class="popup-box" @click-overlay="showPicker = false">
            <div class="picker-box">
                <var-date-picker :model-value="pivkerModelValue" @change="onChange" :max="maxDate" show-current />
                <!-- TODO: 交互调整 -->
                <!-- <div class="button-group">
                                <var-button elevation="0" @click.stop="showPicker = false">取消</var-button>
                                <div class="block"></div>
                                <var-button elevation="0" type="primary" @click.stop="onConfrirm">确认</var-button>
                            </div> -->
            </div>
        </var-popup>
    </div>
</template>

<style lang="scss" scoped>
.form-select-date {
    padding-bottom: 50px;

    .label {
        color: $text-sub;
        line-height: 40px;
        padding-bottom: 10px;
    }

    .select-box {
        height: 96px;
        padding: 0 20px;
        border: 1px solid $border;
        border-radius: 10px;
        @include align-center;

        &.select-error {
            color: $danger;
            border-color: $danger;
        }
    }

    .popup-box {
        border-radius: 10px;

        .picker-box {
            max-height: 80vh;
            width: 90vw;

            .button-group {
                @include center;
                padding: 0 0 24px;

                .block {
                    width: 40px;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.form-select-date {
    .popup-box {
        border-radius: 10px;
    }
}
</style>
